Dans la leçon précédente, nous avons vu un exemple de dialogue système lorsque l'on vous demandait de sélectionner un emplacement
de téléchargement.
Dans cette leçon, nous allons donc examiner de plus près la création de nos propres dialogues personnalisés à diverses fins.
L'API Dialogue est un module autonome sur électron.
La première étape nécessite donc que ce module soit un dialogue électronique ou une minuscule.
Ensuite, avec le module de dialogue disponible, je créerai les boîtes de dialogue de démonstration une fois que tout le contenu
de la fenêtre principale aura été chargé.
Donc, comme auparavant, le contenu Web de la fenêtre principale a été chargé.
En passant cet événement, un rappel, le premier type de dialogue est le dialogue ouvert, comme son nom l'indique,
cela permet à l'utilisateur de sélectionner un ou plusieurs fichiers depuis son ordinateur pour créer un dialogue ouvert.
Nous pouvons faire appel au module de dialogue, afficher le dialogue ouvert comme premier argument de cette méthode que nous pouvons
passer à la fenêtre du navigateur sur laquelle créer la fenêtre principale de dialogue.
Le deuxième argument est un objet d'options.
Cela a un certain nombre d'options pour personnaliser manuellement le dialogue.
Je vais définir le libellé du bouton pour sélectionner une photo et le chemin par défaut pour ouvrir ce dialogue qui vaut mon répertoire personnel
en utilisant up dot get path pour la maison, cela fera l'affaire pour le moment.
Donc, à côté d'obtenir le chemin du fichier qui a été sélectionné, cette fonction renvoie une promesse.
Je vais à nouveau résoudre cela directement sur la fonction appelant puis avec un rappel dans lequel nous pouvons accéder au résultat,
le résultat étant un objet que nous verrons dans une seconde.
Alors déconnectez-vous.
Et immédiatement, lorsque le compte à rebours est chargé, ce dialogue ouvert est affiché avec mon répertoire personnel
étant le chemin par défaut qui nous est présenté selon la configuration que nous avons passée à partir de ce dialogue,
je peux ensuite naviguer vers mon bureau, sélectionner cette photo. ai enregistré à partir de l'endroit, mettez-vous en service ou annulez simplement avant d'aller
de l'avant et de procéder à l'ouverture d'un fichier.
Notez que ce dialogue est présenté dans le cadre de la fenêtre principale, presque identique à une fenêtre enfant.
Ceci étant lorsque nous avons passé la fenêtre principale dans la méthode show open dialogue comme premier argument, ce qui signifie
montrer ce dialogue sur la fenêtre principale.
Le premier argument est cependant facultatif.
Donc, pour créer un dialogue comme sa propre fenêtre autonome, nous pouvons supprimer le premier argument.
Enregistrez à nouveau.
Et maintenant, ce n'est plus attaché à la fenêtre principale, fonctionnant, complètement indépendant, toujours par défaut dans mon
répertoire personnel, qui encore une fois, nous pouvons très simplement changer sur ce paramètre de chemin par
défaut, par exemple, bureau.
Ce qui ouvre le dialogue sur mon chemin de bureau.
Allez-y et sélectionnez cette photo, cliquez sur sélectionnez cette photo, qui est essentiellement juste un bouton
ouvert ré-étiqueté qui ferme le dialogue.
Et dans le terminal, nous voyons un tableau de sélections.
Dans ce cas, cette photo, ne vous inquiétez pas de cet avertissement ici.
Vous voyez de temps en temps des avertissements liés aux API sys natives utilisées par electron, mais ils sont traités dans les mises
à jour.
Donc, être en mesure d'obtenir le chemin vers ce fichier est génial.
Mais nous pouvons personnaliser davantage le comportement de leurs dialogues ouverts en définissant certaines propriétés spécifiques dans
cette configuration.
Propriétés de l'ensemble d'objets, qui prend un tableau de valeurs de propriété.
J'ajouterai la signification de la sélection multiple permettant de sélectionner plusieurs fichiers.
Créer un répertoire une option spécifique à MAC pour permettre au dialogue de créer un nouveau répertoire et après avoir
spécifié certaines propriétés, nous devons maintenant également définir explicitement le comportement par défaut de sélectionner un seul fichier comme
nous venons de le faire.
Et enfin, ouvrez le répertoire pour nous permettre de sélectionner un répertoire entier.
Sauvegarde ça.
Le dialogue a montré cette fois avoir un nouveau bouton dans le nouveau dossier en bas à gauche à la
suite de la définition de l'option créative, cliquez sur celui qui nous présente un nouveau dialogue pour nommer le répertoire que
nous créons.
Je l'appellerai photos et nous verrons le nouveau répertoire apparaître sur mon bureau.
Dupliquez cette photo et déplacez-les dans ce répertoire.
Là où nous pouvons maintenant soit sélectionner tout le répertoire comme celui-ci, soit en maintenant la touche de
commande enfoncée, sélectionner plusieurs fichiers, confirmer l'ouverture de ces deux photos, vérifier le terminal.
Et cette fois, nous avons deux chemins dans le tableau de rappel, un pour chaque photo sélectionnée.
OK, la prochaine boîte de dialogue que je montrerai est le commentaire de dialogue sécurisé.
Celui-ci est toujours dans l'événement de chargement terminé, dit dialogue dot show save dialogue.
Le premier argument étant à nouveau une instance d'une fenêtre de navigateur ou la laissant vide pour un dialogue autonome.
Ensuite, en tant qu'objet d'options, je laisserai ce champ vide.
Résolvez également la promesse de retour avec laquelle nous pouvons à nouveau accéder à un objet de résultat nous indiquant si le dialogue a été
annulé ou quel chemin a été sélectionné exactement de la même manière que le dialogue ouvert.
Je me déconnecte comme avant.
Et nous obtenons ce dialogue très basique pour définir un nom de fichier à un chemin donné, je vais faire
du nom de fichier un nouveau point photo PMG Save.
Ce qui déconnecte ce chemin sûr vers le terminal, il n'y a toujours qu'un seul chemin car il est destiné
à spécifier un seul chemin de ressource.
La logique pour écrire les données dans ce nom de fichier étant une tâche complètement distincte, bien sûr, quelque chose
que nous devrons implémenter sur une base spécifique à l'application.
Enfin, je vais démontrer la boîte de dialogue de la boîte de message, il s'agit d'un
dialogue pour présenter à l'utilisateur un message simple ou pour demander un choix parmi certaines options de bouton personnalisé.
Cette fois, l'appel de la boîte de dialogue affiche le message.
Identique à tous les autres dialogues.
Nous avons la possibilité de l'affecter à une fenêtre de navigateur spécifique.
Je l'admets encore une fois, en définissant un objet de configuration avec la boîte de message de titre de dialogue.
Un message de veuillez sélectionner une option.
Quelques détails sur ce message, devrait-il nécessiter des explications supplémentaires à l'utilisateur?
Et enfin, si vous souhaitez fournir à l'utilisateur des options personnalisées pour choisir parmi une option de
boutons, il s'agit d'un tableau d'options de bouton ou de réponses, créez ce tableau.
Les réponses consées équivalent à un tableau qui vaut, oui, non, et peut-être que ces options peuvent être n'importe quoi, bien sûr.
Puis enfin, pour lire la sélection de l'utilisateur à partir de ces boutons, nous
pouvons résoudre la promesse retournée en accédant ensuite à ce callback du résolveur comme avant l'objet résultat
sur lequel nous pouvons obtenir l'index du bouton sélectionné avec la propriété de réponse déconnexion, l'utilisateur sélectionné sur le tableau des réponses, le
bouton à l'index de ce paramètre de réponse résultat point réponse.
Nous obtenons un dialogue simple avec ces trois boutons personnalisés, notez l'ordre de ces boutons dans le tableau étant
le principal, voici le premier bouton du tableau, le bouton secondaire dans le deuxième élément du
tableau.
Et enfin, tous les boutons restants sont créés ici.
Nous n'avons qu'à sélectionner l'une de ces options.
Je dirai peut-être vérifier le terminal et leur utilisateur sélectionné.
C'est peut-être là que nous quittons le module de dialogue.
Pour l'instant, nous avons une autre option pour créer une boîte de dialogue d'alerte, mais c'est un
message assez simple sans aucune interaction.
Dans la leçon suivante, nous verrons comment créer des raccourcis clavier à l'échelle du système pour votre application.